<template>
	<view class="box">
		<view class="search-input-container" :style="{'background-color':bgcolor}">
			<view class="search-input-box">
				<icon class="search-icon" type="search" size="18"></icon>
				<input type="text" @confirm="$emit('confirm',searchValue)" v-model.trim="searchValue" focus
					placeholder="请输入搜索内容" />
			</view>
		</view>
		<view class="search-advice-box">
			<template v-for="(item,index) in searchAdvanceList">
				<view class="advice-item"  :key="index" @click="goDetailPage(item.goods_id)">
					<text class="ad-name" v-text="item.goods_name"></text>
					<uni-icons class="ad-icon" type="forward" size="20"></uni-icons>
				</view>
				<view class="split-line"></view>
			</template>
		</view>
	</view>

</template>

<script>
	export default {
		name: "my-search-input",
		data() {
			return {
				searchValue: "",
				searchAdvanceList: []
			}
		},
		props: {
			bgcolor: {
				type: String,
				required: true
			}
		},
		created() {
			
		},
		methods: {
			async getSearchAdvance(searchValue) {
				let {
					data: {
						message,
						meta
					}
				} = await uni.$http.get(`/api/public/v1/goods/qsearch?query=${searchValue}`);
				if (meta && meta.status == 200) {
					this.searchAdvanceList = message;
					this.$emit("kwlist-change",searchValue);
				} else {
					uni.$showReqFailToast()
				}
			},
			goDetailPage(goods_id){
				uni.navigateTo({
					url:`/subpkg/goodsdetail/goodsdetail?goods_id=${goods_id}`
				})
			}
		},
		watch: {
			searchValue(newValue, oldValue) {
				clearTimeout(this.timer);
				if (newValue) {
					this.timer = setTimeout(() => {
						this.getSearchAdvance(newValue);
					}, 1500);
				} else {
					this.searchAdvanceList = [];
				}

			},
			isAdExist(newV, oldV){
				this.$emit('check-advice',newV);
			}
		},
		computed:{
			isAdExist(){
				return this.searchAdvanceList.length;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		.search-input-container {
			width: 100%;
			height: 120rpx;
			position: sticky;
			top: 0;
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;

			.search-input-box {
				width: 92%;
				height: 80rpx;
				border-radius: 41rpx;
				background-color: #fbfbfb;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.search-icon {
					margin: 0 12rpx;
				}
			}
		}
		.search-advice-box{
			.advice-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				padding: 0 5rpx 0 15rpx;
				.ad-name{
					flex:1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.ad-icon{
					
				}
			}
			.split-line{
				height: 0;
				border-bottom: 2rpx solid #efefef;
				margin:0 15rpx;
			}
		}
	}
</style>
